//配置路由相关的信息
import Vue from "vue";
import VueRouter from "vue-router";


//一、普通引用的 路由配置
// import Home from "../components/Home.vue";
// import About from "../components/About.vue";
// import User from '../components/User.vue'

// 1 安装插件, 通过 Vue.use(插件)。
// Vue.use(VueRouter);

// const routes = [
//   {
//     path: "/",
//     redirect: "/home"  // 重定向
//   },
//   {
//     path: "/home",
//     component: Home
//   },
//   {
//     path: "/about",
//     component: About
//   },
//   {
//     path: '/user/:abc', // :abc 是变量
//     component: User,
//   }
// ];

// 2 创建VueRouter对象
// const router = new VueRouter({
//   //配置路由和组件之间的应用关系
//   routes,         //这里一定要注意 ` routes `
//   mode: 'history', //模式 1、hash(默认)  2、history
//   // linkActiveClass: 'active' //统一配置所有 router-link 激活添加class样式。
// });

// 3 将router传入到Vue实例中
// export default router;


//--------------------------------------------------------------------

/**
 *  routes - mode
 *  1. hash - 默认  http://localhost:8081/#/xxx/xx   有#号
 *  2. history     http://localhost:8081/xxx/xx     没有#号
 *
 * --------------------------------
 *
 * 上面的
 * 1、引用后直接使用的 --打包后--> app.xx.js + chunk-vendor.xxx.js
    import Home from '../components/Home.vue'
 *
 *
 * 2、
   const rou = {
   {
     path: '/home',
     component: ()=> import('../components/Home.vue')
   },
   ...

   打包结果
   app.xxx.js
   chunk-xxx1.js
   chunk-xxx2.js
   ...
   chunk-xxxn.js
   chunk-vendor.xx.js
 }
 *
 *
 */


//// 二、路由懒加载
// Vue.use(VueRouter);
// const routes = [
//   {
//     path: "/",
//     redirect: "/home"  // 重定向
//   },
//   {
//     path: "/home",
//     component: ()=> import ('../components/Home.vue')
//   },
//   {
//     path: "/about",
//     component: ()=> import ('../components/About.vue')
//   },
//   {
//     path: '/user/:abc', // :abc 是变量
//     component: ()=> import ('../components/User.vue')
//   }
// ];

// const router = new VueRouter({
//   //配置路由和组件之间的应用关系
//   routes,         //这里一定要注意 ` routes `
//   mode: 'history', //模式 1、hash(默认)  2、history
//   // linkActiveClass: 'active' //统一配置所有 router-link 激活添加class样式。
// });

// export default router;


/// 这么写，结构清晰
Vue.use(VueRouter);

const Home = () => import("../components/Home");
const About  = () => import("../components/About");
const User  = () => import('../components/User')
const Profile = () => import('../components/Profile')

const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const routes = [
  {
    path: "",
    redirect: "home"  // 重定向
  },
  {
    path: "/home",
    component: Home,
    children: [
      // {
      //   path: "",
      //   redirect: 'news'  // 重定向
      // },
      {
        path: "news",
        component: HomeNews,
      },
      {
        path: "message",
        component: HomeMessage,
      }
    ]
  },
  {
    path: "/about",
    component: About
  },
  {
    path: '/user/:abc', // :abc 是变量
    component: User
  },
  {
    path: '/profile',
    component: Profile
  }
];

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,         //这里一定要注意 ` routes `
  mode: 'history', //模式 1、hash(默认)  2、history
  // linkActiveClass: 'active' //统一配置所有 router-link 激活添加class样式。
});

export default router;